<!--
 * @Author: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @Date: 2024-05-23 15:14:30
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-05-25 14:09:30
 * @FilePath: \my-electron\src\views\setting\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="setting">
    <div class="setting-top-handle">
      <div @click="cancel" class="el-icon-arrow-left back-btn"></div>
      <el-button size="mini" @click="save"  type="primary">保存</el-button>
    </div>
    <div class="setting-top">
      <h3>基础设置</h3>
    </div>
    <div class="setting-content">
      <div class="setting-content-list">
        <div class="list-item" v-for="item in settingList" :key="item.label">
          <p>{{ item.label }}</p>
          <el-switch class="switchStyle" v-model="item.value" active-color="#13ce66" inactive-color="#ff4949" active-text="打开" inactive-text="关闭"></el-switch>
        </div>
      </div>
    </div>
    <el-button class="setting-btn" @click="changeDialog">初始化设置</el-button>
    <verifyDialogVue class="setting-dialog" text="确认是否初始化设置？" btnText="是" v-if="dialogShow" @thinkAgain="hideDialog" @reset="goToPage"></verifyDialogVue>
  </div>
</template>

<script>
import verifyDialogVue from '@/components/verifyDialog.vue';
export default {
  name: 'setting',
  data () {
    return {
      settingList: [],
      dialogShow: false,
    }
  },
  components: {
    verifyDialogVue
  },
  methods: {
    changeDialog () {
      this.dialogShow = true
    },
    hideDialog () {
      this.dialogShow = false
    },
    goToPage() {
      localStorage.removeItem('corporationInfo')
      this.$router.push({ path: '/corporationSetting' })
    },
    cancel () {
      this.$router.push({ path: '/' })
    },
    save () {
      if(this.settingList.length) localStorage.setItem('settingList', JSON.stringify(this.settingList))
      this.$router.push({ path: '/' })
    }
  },
  mounted () {
    this.settingList = JSON.parse(localStorage.getItem('settingList')) || [
      { label: '生产日期：', value: false},
      { label: '自动打印：', value: false},
      { label: '未分拣打印：', value: false},
      { label: '基础单位分拣：', value: false},
    ]
  },
  created () {
    // const { ipcRenderer } = require('electron');
    // ipcRenderer.on('message-from-main', (event, arg) => {
    //   console.log(arg); // Prints: 'Hello Renderer!'
    // });
  }
}
</script>
<style lang="scss" scoped>
.setting {
  position: relative;
  height: 100vh;
  background-color: rgba(245, 255, 250, 0.3);
  .setting-top-handle {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .back-btn {
      font-size: 24px;
      cursor: pointer;
    }
  }
  &-top {
    background: #EEEEEE;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    h3 {
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 18px;
      color: #808080;
      margin: 0;
    }
  }
  /deep/ &-content {
    margin: 80px 0 0 80px;
    position: relative;
    .setting-content-list {
      .list-item {
        display: flex;
        align-items: center;
        p {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #808080;
          line-height: 18px;
        }
      }
    }
    .switchStyle .el-switch__label {
      position: absolute;
      display: none;
      color: #fff;
    }
    .switchStyle .el-switch__label--left {
      z-index: 9;
      left: 23px;
    }
    .switchStyle .el-switch__label--right {
      z-index: 9;
      left: 0px;
    }
    .switchStyle .el-switch__label.is-active {
      display: block;
    }
    .switchStyle.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 60px !important;
    }
  }
  .setting-btn {
    width: 166px;
    height: 40px;
    background: url('../../assets/btn_bg.png') no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC;
    font-weight: 800;
    color: #999999;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 300px;
  }
  .setting-dialog {
    top: 36%;
    right: 34%;
  }
}
</style>
